{extend name="main"}
{block name="style"}
<style type="text/css">
.w-60px{width: 60px;}
.w-80px{width: 80px;}
.w-150px{width: 150px;}
.wx-wechat{width: 320px;height: 600px;margin: 0 auto;position: relative;border:solid 1px #ddd;overflow:hidden;}
.wx-wechat .wx-wechat-header{width: 100%;height:54px;line-height:54px;background-color: #343434;color: #fff;text-align: center;}
.wx-wechat-body{width:337px;overflow-y: scroll;background-color: #eee;}
.el-date-editor .el-range-separator{width: auto;}
.wx-wechat-body p{margin-bottom:0;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="flex">
		<div class="flex-1 pr-3">
			<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

			  <el-form-item label="推文类型" prop="type">
			    <el-radio-group class="ml-0 ml-sm-2" v-model="form.type"
			    @change="tableData=[];setTplContent();">
			      <el-radio :label="'jobs'">职位</el-radio>
			      <el-radio :label="'company'">企业</el-radio>
			    </el-radio-group>
			  </el-form-item>
			  <div v-if="form.type==='jobs'">
				  <el-form-item label="职位增值筛选">
				  	<el-checkbox v-model="form.top" :true-label="1" false-label="all">置顶</el-checkbox>
				  	<el-checkbox v-model="form.recommend" :true-label="1" false-label="all">推荐</el-checkbox>
				  	<el-checkbox v-model="form.urgent" :true-label="1" false-label="all">紧急招聘</el-checkbox>
				  	<el-checkbox v-model="form.is_famous" :true-label="1" false-label="all">名企</el-checkbox>
				  </el-form-item>

				  <el-form-item label="职位ID" prop="jobs_id">
					  <el-select
					    v-model="form.jobs_id"
					    filterable
					    remote
					    placeholder="请输入关键词"
					    :remote-method="getJobs"
					    :loading="loading"
					    clearable
				    	class="w-50">
					    <el-option
					      v-for="item in JobsData"
					      :key="item.id"
					      :label="item.title"
					      :value="item.id">
					    </el-option>
					  </el-select>
				  </el-form-item>

				  <el-form-item label="企业" prop="company_id">
					  <el-select
					    v-model="form.company_id"
					    filterable
					    remote
					    placeholder="请输入关键词"
					    :remote-method="getCompany"
					    :loading="loading"
					    clearable
				    	class="w-50">
					    <el-option
					      v-for="item in CompanyData"
					      :key="item.id"
					      :label="item.title"
					      :value="item.id">
					    </el-option>
					  </el-select>
				  </el-form-item>

				  <el-form-item label="来源" prop="app_id">
					  <el-checkbox-group v-model="form.app_id">
					    <el-checkbox v-for="(v,index) in ClientApp" :label="v.app_id">{{v.app_name}}</el-checkbox>
					  </el-checkbox-group>
				  </el-form-item>

				  <el-form-item label="会员" prop="vip">
					  <el-checkbox-group v-model="form.vip_level">
					    <el-checkbox v-for="(v,index) in vip" :label="v.level" v-if="v.is_company">{{v.title}}</el-checkbox>
					  </el-checkbox-group>
				  </el-form-item>

				  <el-form-item label="时间" prop="time">
				  	<el-date-picker
				      v-model="form.time"
				      type="daterange"
				      align="right"
				      unlink-panels
				      clearable
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期"
	      			  value-format="timestamp"
				      :picker-options="pickerOptions"
				      class="w-50">
				    </el-date-picker>
				  </el-form-item>

				  <el-form-item label="区域" prop="area">
				    <el-cascader 
				    	v-model="form.area"
				    	placeholder="试试搜索：北京"
				    	filterable
				    	clearable
						:props="areaProps"
				    	:options="arealist"
				    	class="w-50">
				    </el-cascader>
				  </el-form-item>

				  <el-form-item label="职位类别" prop="jobs_cid">
				  	<el-cascader
					    v-model="form.jobs_cid"
					    :options="jobscatelist"
					    placeholder="请选择"
					    :props="defaultProps"
					    filterable
					    collapse-tags
					    clearable
					    :show-all-levels="false"
				    	class="w-50">
				    </el-cascader>
				  </el-form-item>
			  </div>
			  <div v-if="form.type==='company'">
				  <el-form-item label="企业筛选">
				  	<el-checkbox v-model="form.is_famous" :true-label="1" false-label="all">名企</el-checkbox>
				  </el-form-item>

				  <el-form-item label="来源" prop="app_id">
					  <el-checkbox-group v-model="form.app_id">
					    <el-checkbox v-for="(v,index) in ClientApp" :label="v.app_id">{{v.app_name}}</el-checkbox>
					  </el-checkbox-group>
				  </el-form-item>

				  <el-form-item label="会员" prop="vip">
					  <el-checkbox-group v-model="form.vip_level">
					    <el-checkbox v-for="(v,index) in vip" :label="v.level" v-if="v.is_company">{{v.title}}</el-checkbox>
					  </el-checkbox-group>
				  </el-form-item>

				  <el-form-item label="企业" prop="company_id">
					  <el-select
					    v-model="form.company_id"
					    filterable
					    remote
					    placeholder="请输入关键词"
					    :remote-method="getCompany"
					    :loading="loading"
					    clearable
				    	class="w-50">
					    <el-option
					      v-for="item in CompanyData"
					      :key="item.id"
					      :label="item.title"
					      :value="item.id">
					    </el-option>
					  </el-select>
				  </el-form-item>

				  <el-form-item label="时间" prop="time">
				  	<el-date-picker
				      v-model="form.time"
				      type="daterange"
				      align="right"
				      unlink-panels
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期"
	      			  value-format="timestamp"
				      :picker-options="pickerOptions"
				      class="w-50">
				    </el-date-picker>
				  </el-form-item>

				  <el-form-item label="区域" prop="area">
				    <el-cascader 
				    	v-model="form.area"
				    	placeholder="试试搜索：北京"
				    	filterable
						:props="areaProps"
				    	:options="arealist"
				    	class="w-50">
				    </el-cascader>
				  </el-form-item>
			  </div>
			  <el-form-item label="排序" prop="prop">
			    <el-radio-group class="ml-0 ml-sm-2" v-model="form.prop">
			      <el-radio :label="'default'">默认</el-radio>
			      <el-radio :label="'recommend'">推荐</el-radio>
			      <el-radio :label="'rand'">随机</el-radio>
			    </el-radio-group>
			  </el-form-item>
			  <el-form-item label="数量" prop="sum">
			    <el-radio-group class="ml-0 ml-sm-2" v-model="form.sum">
			      <el-radio :label="1">1条</el-radio>
			      <el-radio :label="3">3条</el-radio>
			      <el-radio :label="5">5条</el-radio>
			      <el-radio :label="10">10条</el-radio>
			    </el-radio-group>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="submitForm('form')">筛 选</el-button>
			  </el-form-item>
			</el-form>
		</div>
		<div class="flex-1 pl-3">
			<el-divider content-position="left">预览</el-divider>
			<div class="flex">
				<div>
					<div class="wx-wechat wrap">
						<div class="wx-wechat-header">
							{:config('web.name')}
						</div>
						<div class="wx-wechat-body flex1 p-3">
							<div class="bg-white p-2 rounded" style="min-height:200px;" id="wechatContentTextBody"
							v-html="ntobr(tpl_content)"></div>
						</div>
					</div>
					<div class="text-center py-3" v-if="tpl_content">
						<el-button type="primary" @click="copyContent" id="copyContent">一键复制</el-button>
					</div>
				</div>
				<div class="flex-1 pl-3">
					<el-form label-width="120px" label-position="top">
					  <el-form-item label="已保存的模板">
						  <el-select
						    v-model="tpl_id"
						    filterable
						    placeholder="请输入关键词"
						    clearable
						    class="w-100"
						    @change="changeTpl">
						    <el-option
						      v-for="item in tplData"
						      v-if="item.tpl_type==form.type"
						      :key="item.id"
						      :label="item.tpl_name"
						      :value="item.id">
						    </el-option>
						  </el-select>
					  </el-form-item>
					  <el-form-item label="模板内容">
					  	<el-input
						  type="textarea"
						  :autosize="{ minRows: 6, maxRows: 20}"
						  placeholder="请输入内容"
						  v-model="tpl">
						</el-input>
					  </el-form-item>
					  <el-form-item label="福利连接字符">
					  	<el-input
						  placeholder="默认：空格"
						  v-model="welfare_join_str">
						</el-input>
					  </el-form-item>
					  <el-form-item label="标签库">
					  	<div v-if="form.type==='jobs'">
						  	<el-tag size="mini" class="pointer mr-1" @click="copyTag"
						  	v-for="(v,key) in jobs_dictionaries">{{key}}</el-tag>
					  	</div>
					  	<div v-if="form.type==='company'">
						  	<el-tag size="mini" class="pointer mr-1" @click="copyTag"
						  	v-for="(v,key) in company_dictionaries">{{key}}</el-tag>
					  	</div>
					  	<div>
						  	<el-tag size="mini" class="pointer mr-1" @click="copyTag"
						  	v-for="(v,key) in common_dictionaries">{{key}}</el-tag>
					  	</div>
					  </el-form-item>
					  <el-form-item label="职位" v-if="form.type==='company'">
					  	<div v-for="(v,index) in tableData">
					  		<div>
					  			<el-checkbox v-model="v.showjobs" :true-label="1" :false-label="0" @change="setTplContent()">{{v.title}}</el-checkbox>
					  		</div>
					  		<div v-for="(jobs,jobs_index) in v.jobs"
					  		v-if="v.showjobs"
					  		class="pl-5">
					  			<el-checkbox v-model="jobs.status" :true-label="1" :false-label="0" @change="setTplContent()">{{jobs.title}} {{jobs.salary_min>0?(v.jobs_salary_show_type?(jobs.salary_min)+'~'+(jobs.salary_max)+'元':jobs.salary_min/1000+'~'+jobs.salary_max/1000+'k'):'面议'}}{{jobs.salary_year>12?' · '+jobs.salary_year+'薪':''}}</el-checkbox>
					  		</div>
					  	</div>
					  </el-form-item>
					  <el-form-item label="模板名称">
					  	<el-input
						  v-model="tpl_name">
						</el-input>
					  </el-form-item>
					  <el-form-item>
						<el-button type="primary" @click="saveTplContent">保存模板</el-button>
					  </el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="script"}
{js href="__PLUGIN_SRC__/Clipboard/clipboard.min.js"}
<script type="text/javascript">
	{empty name="ClientApp"}
	var ClientApp=[];
	{else/}
	var ClientApp={:json_encode($ClientApp,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="vip"}
	var vip=[];
	{else/}
	var vip={:json_encode($vip,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="tplData"}
	var tplData=[];
	{else/}
	var tplData={:json_encode($tplData,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="arealist"}
	var arealist=[];
	{else/}
	var arealist={:json_encode($arealist,JSON_UNESCAPED_UNICODE)};
	{/empty}
	var jobscatelist={xycms:jobscate serialize="json"/};
	{empty name="Find"}
	var formData={
				type:'jobs',
				top:'all',
				company_id:'',
				jobs_id:'',
				recommend:'all',
				urgent:'all',
				is_famous:'all',
				app_id:[],
				vip_level:[],
				sum:1,
				time:[],
				area:[],
				jobs_cid:[],
				prop:'default',
			};
	{else/}
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			vip:vip,
			ClientApp:ClientApp,
			arealist:arealist,
			jobscatelist:jobscatelist,
			loading:false,
			showCompanyJobs:false,
			tpl:'',
			tpl_content:'',
			tpl_name:'',
			tpl_id:'',
			welfare_join_str:' ',
			jobs_dictionaries:{
				'#ID#':'id',
				'#职位#':'title',
				'#职位分类#':'jobs_cate',
				'#薪资#':'salary',
				'#福利#':'welfare',
				'#学历#':'education',
				'#经验#':'exp_level',
				'#人数#':'number_of_recruiters',
				'#浏览量#':'view',
				'#联系人#':'contacts',
				'#企业名称#':'company_name',
				'#企业简称#':'scompany_name',
				'#企业名称-简称优先#':'company_name_s',
				'#企业行业#':'industry',
				'#省#':'jobs_province',
				'#市#':'jobs_city',
				'#区#':'jobs_area',
				'#详细地址#':'contacts_address',
				'#企业规模#':'size_type',
				'#职位说明#':'jobs_desc',
				'#职位链接#':'jobs_url',
				'#企业链接#':'company_url',
				'#更新时间#':'update_time',
				'#创建时间#':'create_time',
			},
			company_dictionaries:{
				'#ID#':'id',
				'#企业名称#':'title',
				'#企业简称#':'stitle',
				'#企业名称-简称优先#':'title_s',
				'#企业行业#':'industry',
				'#企业性质#':'nature',
				'#注册资本#':'finance',
				'#企业规模#':'size_type',
				'#职位列表#':'jobs_list',
				'#福利#':'welfare',
				'#浏览量#':'view',
				'#联系人#':'contacts',
				'#省#':'province',
				'#市#':'jcity',
				'#区#':'area',
				'#详细地址#':'contacts_address',
				'#企业简介#':'company_introduction',
				'#企业链接#':'company_url_self',
				'#更新时间#':'update_time',
				'#创建时间#':'create_time',
			},
			common_dictionaries:{
				'#网站名称#':"{:config('web.name')}",
				'#网站域名#':"{:config('web.url')}",
				'#网站顶级域名#':"{:config('web.domain')}",
				'#H5域名#':"{:config('web.h5')}",
				'#APP下载#':"{:config('web.downUrl')}",
			},
	        areaProps: {
	          	value: 'id',
	          	label: 'title',
	          	children: 'data',
	          	checkStrictly:true
	        },
	        defaultProps: {
	          	value: 'id',
	          	label: 'title',
	          	children: 'data',
	          	multiple: true
	        },
	        pickerOptions: {
	          shortcuts: [{
	            text: '今日',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              picker.$emit('pick', [start, end]);
	            }
	          },{
	            text: '昨日',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
	              picker.$emit('pick', [start, end]);
	            }
	          },{
	            text: '最近三天',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近一周',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近一个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
	              picker.$emit('pick', [start, end]);
	            }
	          }],
	          disabledDate:function(event){
	            const now = new Date();
	          	return now.getTime()<event.getTime();
	          }
	        },
			form:formData,
			tplData:tplData,
			tableData:[],
			CompanyData:[],
			JobsData:[],
	        rules: {
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		    welfare_join_str(val,oldTpl){
		    	this.setTplContent();
		    },
		    tpl(val,oldTpl){
		    	this.setTplContent();
		    }
		},
		created(){
			XYBase.created(this);
		},
		methods:{
			ntobr(str){
				if (str) {
					return str.replace(/\n/g,'<br/>');
				}else{
					return str;
				}
			},
			changeTpl(event){
				if (!event)return;
				for (var i = 0; i < this.tplData.length; i++) {
					if(this.tplData[i].id==event){
						this.tpl=this.tplData[i].tpl_content;
						this.tpl_name=this.tplData[i].tpl_name;
						break;
					}
				}
			},
			setTplContent(){
				if(this.tableData.length){
					var tpl_content=[];
					var dictionaries=this.jobs_dictionaries;
					if(this.form.type==='company')
						dictionaries=this.company_dictionaries;
					for (var i = 0; i < this.tableData.length; i++) {
						var tpl=this.tpl;
						for (x in dictionaries) {
							var str='';
							switch(dictionaries[x]){
								case 'salary':
									if(this.tableData[i].salary_min>0){
										str=this.tableData[i].salary_min+'~'+this.tableData[i].salary_max+'元';
									}else{
										str='面议';
									}
									if(this.tableData[i].salary_year>12)
										str=str+' · '+this.tableData[i].salary_year+'薪';
								break;
								case 'company_name_s':
									str=this.tableData[i].company_name;
									if(this.tableData[i].scompany_name)
										str=this.tableData[i].scompany_name;
								break;
								case 'title_s':
									str=this.tableData[i].title;
									if(this.tableData[i].stitle)
										str=this.tableData[i].stitle;
								break;
								case 'welfare':
									str=this.tableData[i].welfare.join(this.welfare_join_str);
								break;
								case 'jobs_url':
									str='{:config('web.url')}/jobs/'+this.tableData[i].id+'.html';
								break;
								case 'company_url':
									str='{:config('web.url')}/company/'+this.tableData[i].company_id+'.html';
								break;
								case 'company_url_self':
									str='{:config('web.url')}/company/'+this.tableData[i].id+'.html';
								break;
								case 'jobs_list':
									if(this.tableData[i].showjobs&&this.tableData[i].jobs){
										for (var n = 0; n < this.tableData[i].jobs.length; n++) {
											var jobsFind=this.tableData[i].jobs[n];
											if (jobsFind.status) {
												str+=jobsFind.title+' '+(jobsFind.salary_min>0?(this.tableData[i].jobs_salary_show_type?(jobsFind.salary_min)+'~'+(jobsFind.salary_max)+'元':jobsFind.salary_min/1000+'~'+jobsFind.salary_max/1000+'k'):'面议')+' '+(jobsFind.salary_year>12?' · '+jobsFind.salary_year+'薪':'')+"\n";
											}
										}
									}
								break;
								default:
								if(typeof this.tableData[i][dictionaries[x]]!='undefined'){
									str=this.tableData[i][dictionaries[x]];
								}
								break;
							}
							tpl=tpl.replace(x,str);
						}
						tpl_content.push(tpl);
					}
					this.tpl_content=tpl_content.join("\n\n\n");
				}else{
		    		this.tpl_content='';
				}
			},
			saveTplContent(){
				if(!this.tpl_name)
					return XYBase.msg('模板名称不能为空');
				if(!this.tpl)
					return XYBase.msg('模板内容不能为空');
				var _this=this;
				const loading = XYBase.openloading();
				$.ajax({
					url:'',
					data:{
						type:'saveTpl',
						id:this.tpl_id,
						tpl_type:this.form.type,
						tpl_name:this.tpl_name,
						tpl_content:this.tpl,
					},
					type:'post',
					dataType:'json',
					success:function(ret){
				        loading.close();
				        if (ret) {
							if(ret.code == 0){
								_this.tplData=ret.data;
								XYBase.success(ret.msg);
							}else{
								XYBase.msg(ret.msg);
							}
				        }else{
			          		XYBase.error(XYBase.config.system_network_error)
				        }
					},
					error:function(err){
				        loading.close();
			          	XYBase.error(XYBase.config.system_network_error)
					}
				});
			},
	    	conGetHtml:function(str){
		      if (str) {
		        return str.replace(/\n/g, '<br/>');
		      }else{
		        return '';
		      }
		    },
			copyTag(event){
				var clip = new ClipboardJS('.el-tag', {
				    text: function() {
				    	return event.target.innerText;
				    }
				});
				clip.on('success', function(e) {
				    e.clearSelection();
					XYBase.success('已复制');
					clip.destroy();
				});
				clip.on('error', function(e) {
					console.log(e);
					clip.destroy();
				});
			},
			copyContent(){
				var clip = new ClipboardJS('#copyContent', {
				target: function() {return document.getElementById('wechatContentTextBody');}
				});
				clip.on('success', function(e) {
				    e.clearSelection();
					XYBase.success('已复制');
					clip.destroy();
				});
				clip.on('error', function(e) {
					console.log(e);
					clip.destroy();
				});
			},
			getJobs(queryString){
				this.loading=true;
				var _this=this;
				$.ajax({
					url:'/jobs',
					data:{
						search_type:'id',
						key:queryString,
						attestation:'all',
						examine:'all',
						page:1,
						pageSize:10
					},
					type:'GET',
					dataType:'json',
					error:function(){
						_this.loading=false;
					},
					success:function(ret){
						_this.loading=false;
						if(ret){
							_this.JobsData=ret.data.data
						}
					},
				})
			},
			getCompany(queryString){
				this.loading=true;
				var _this=this;
				$.ajax({
					url:'/company',
					data:{
						search_type:'company_name',
						key:queryString,
						attestation:'all',
						page:1,
						pageSize:10
					},
					type:'GET',
					dataType:'json',
					error:function(){
						_this.loading=false;
					},
					success:function(ret){
						_this.loading=false;
						if(ret){
							_this.CompanyData=ret.data.data
						}
					},
				})
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:'',
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									_this.tableData=ret.data.data;
									_this.setTplContent();
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}